<template>
	<view class="container">
		<view class="head">
			<view class="navbar">
				<view class="center">
					{{ title }}
				</view>
			</view>
			<!-- 搜索栏 -->
			<view class="search_bar" @click="onSearchClick">
				<u-search placeholder="搜索专辑" v-model="searchKeyword" :show-action="false"></u-search>
			</view>
			<view class="tabs">
				<u-tabs :list="tabs" @click="onClickTabs"></u-tabs>
			</view>
		</view>
		<view class="content">
			<block v-if="activeTab === 0">
				<view class="block">
					<!-- 轮播图 -->
					<view class="swiper_box">
						<u-swiper
							:list="swiperList"
							height="150"
							bgColor="#fff"
							:border-radius="8"
							:interval="3000"
							imgMode="aspectFill"
							keyName="image"
							previousMargin="30"
							nextMargin="30"
							circular
						></u-swiper>
					</view>

					<!-- 分类导航 -->
					<view class="nav_grid">
						<u-grid :col="5" :border="false">
							<u-grid-item v-for="(item, index) in navList" :key="index" @click="navTo(item.path)">
								<u-icon :name="item.icon" :size="30"></u-icon>
								<text class="grid-text">{{ item.name }}</text>
							</u-grid-item>
						</u-grid>
					</view>

					<!-- 优化推荐内容部分 -->
					<album-section v-for="(section, index) in FeaturedList" :key="index" :section="section" @more="goMore" @detail="goDetail" />

					<!-- 优化推荐列表部分 -->
					<recommend-list title="猜你喜欢" :list="tuijianList" @detail="goDetail" />
				</view>
			</block>
			<block v-else>
				<view class="block">
					<view class="Category_bar">
						<view class="category_item" v-for="(item, index) in categoryList" :key="index">
							<text class="category_name">{{ item.name }}</text>
						</view>
					</view>
					<!-- 复用相同的组件结构 -->
					<album-section v-for="(section, index) in pageList" :key="index" :section="section" @more="goMore" @detail="goDetail" />

					<recommend-list title="猜你喜欢" :list="tuijianList" @detail="goDetail" />
				</view>
			</block>
		</view>

		<tabbarVue :selectedTabbar="0" />
		<!-- <GlobalAudioPlayer /> -->
		<!-- <audioPlayerVue /> -->
	</view>
</template>

<script>
import audioPlayerVue from '../../components/audio-player.vue';
import tabbarVue from '../../components/tabbar.vue';
import AlbumSection from '../../components/album-section.vue';
import RecommendList from '../../components/recommend-list.vue';
import { formatViewCount } from '../../utils/format.js';
// import GlobalAudioPlayer from "../../components/global-audioplayer.vue";
import { swiperList, tabs, navList, FeaturedList, categoryList, pageList, tuijianList } from '../../mock/home.js';

export default {
	components: {
		tabbarVue,
		AlbumSection,
		RecommendList,
		audioPlayerVue
		// GlobalAudioPlayer,
	},

	data() {
		return {
			title: '首页',
			searchKeyword: '',
			activeTab: 0,
			swiperList: [],
			tabs: [],
			navList: [],
			FeaturedList: [],
			categoryList: [],
			pageList: [],
			tuijianList: []
		};
	},
	onShow() {
		this.getHomeData();
	},
	methods: {
		getHomeData() {
			let PostData = {
				ac: 'gethome'
			};
			uni.$u.http.post('', PostData).then((res) => {
				console.log(res);
				this.swiperList = res.slideimg;
				let tabs = res.lang.map((item) => {
					return {
						name: item.lang
					};
				});
				this.tabs = tabs;
				let navList = res.catelist.map((item) => {
					return {
						name: item.name,
						icon: 'list',
						path: `/pages/categories/detail?cate_id=${item.id}&name=${item.name}`
					};
				});
				this.navList = navList;
				let FeaturedList = [];
				let list1 = {
					title: '新品速递',
					hasmore: false,
					showtype: 'grid',
					showViewCountType: 'onfoot',
					showViewCount: 2,
					items: res.tuijian.map((item) => {
						let title = item.title.split(' by ')[0].trim();
						return {
							id: item.id,
							name: title,
							description: item.description,
							coverUrl: item.cover_url,
							viewCount: item.views
						};
					})
				};
				let list2 = {
					title: '热门好书',
					hasmore: false,
					showtype: 'swiper',
					showViewCountType: 'onfoot',
					showViewCount: 2,
					items: res.tuijian.map((item) => {
						let title = item.title.split(' by ')[0].trim();
						return {
							id: item.id,
							name: title,
							description: item.description,
							coverUrl: item.cover_url,
							viewCount: item.views
						};
					})
				};
				FeaturedList = [list1, list2];
				this.FeaturedList = FeaturedList;
				let tuijianList = res.homelist.map((item) => {
					let title = item.title.split(' by ')[0].trim();
					return {
						id: item.id,
						name: title,
						description: item.description,
						coverUrl: item.cover_url,
						viewCount: item.views
					};
				});
				this.tuijianList = tuijianList;
			});
		},
		onSearchClick() {
			console.log('onSearchClick');
			uni.navigateTo({
				url: '/pages/search/index'
			});
		},

		onClickTabs(item) {
			this.activeTab = item.index;
			uni.pageScrollTo({
				scrollTop: 0,
				selector: '.content',
				duration: 1000
			});
		},

		navTo(path) {
			uni.navigateTo({ url: path });
		},

		goMore() {
			uni.navigateTo({
				url: '/pages/recommend/more'
			});
		},

		goDetail(item) {
			uni.navigateTo({
				url: `/pages/album/detail?id=${item.id}`
			});
		},

		formatViewCount // 使用工具函数
	}
};
</script>

<style lang="scss" scoped>
.container {
}

.head {
	position: sticky;
	top: 0;
	z-index: 999;
	background: #fff;
}

.navbar {
	padding-top: var(--status-bar-height);
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;

	.center {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		width: 400rpx;
	}
}

.search_bar {
	padding: 20rpx;
	background: #fff;
}

.swiper_box {
	padding: 20rpx;
}

.nav_grid {
	padding: 30rpx 0;
	background: #fff;
	.grid-text {
		font-size: 24rpx;
		margin-top: 8rpx;
	}
}

.Category_bar {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx;
	background: #fff;
	.category_item {
		width: 25%;
		text-align: center;
		margin-bottom: 20rpx;
		.category_name {
			font-size: 28rpx;
			color: #333;
			padding: 10rpx 20rpx;
			background: #f5f5f5;
			border-radius: 25rpx;
			display: inline-block;
		}
	}
}
</style>
